<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .box {
        width: 80px;
        margin: 100px auto;
    }

    a {
        display: block;
        text-align: center;
        text-decoration: none;
        color: #333;
        width: 80px;
        height: 30px;
        line-height: 30px;
    }

    .box dd {
        /* display: none; */
        text-align: center;
        width: 80px;
        height: 0;
        line-height: 30px;
        overflow: hidden;
    }
</style>

<body>
    <div class="box">
        <dl>
            <dt>
                <a href="#">微博</a>
            </dt>
            <dd>私信</dd>
            <dd>评论</dd>
            <dd>@我</dd>
        </dl>
    </div>
    <script>
        var box=document.querySelector('.box')
        var weibo = document.querySelector('a');
        var dds = document.querySelectorAll('dd');
        box.onmouseover = function () {
            weibo.style.backgroundColor = '#999';
            for(var i=0;i<dds.length;i++){
              dds[i].style.height='30px';
              dds[i].style.transition='height 0.3s'
              dds[i].style.border='1px solid #ff8400'
              dds[i].style.borderTop='0';
            }
        }
        box.onmouseout = function () {
            weibo.style.backgroundColor = '';
            for(var i=0;i<dds.length;i++){
              dds[i].style.height='0';
              dds[i].style.border='0';
            }
        }
        weibo.onmouseover=function(){
            this.style.color = '#ff8400';
        }
        weibo.onmouseout=function(){
            this.style.color = '#333';
        }
        for (var i = 0; i < dds.length; i++) {
            dds[i].onmouseover = function() {
                this.style.color = '#ff8400';
                this.style.backgroundColor = '#fff5da';
            }
            dds[i].onmouseout = function() {
                this.style.color = '#333';
                this.style.backgroundColor = '';
            }
        }
    </script>
</body>

</html>